<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<title>Page Turning (Various page types)</title>
	<link href="../themes/common/PageTurning.css" rel="stylesheet">
	<script type="text/javascript" src="../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base','SpinWheel']"></script>
	<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true, mblAlwaysHideAddressBar: true"></script>

	<script type="text/javascript">
		require([
			"dojo/_base/window",
			"dojo/dom",
			"dojo/ready",
			"dojox/mobile/pageTurningUtils",
			"dojox/mobile/parser",
			"dojox/mobile",
			"dojox/mobile/compat",
			"dojox/mobile/ScrollableView",
			"dojox/mobile/SpinWheel",
			"dojox/mobile/ContentPane"
		], function(win, dom, ready, pageTurningUtils){
			utils = new pageTurningUtils();
			
			ready(function(){
				var bgColor = win.doc.defaultView.getComputedStyle(win.body(), '')["background-color"];
				dom.byId("front4").style.backgroundColor = bgColor;
				dom.byId("front5").style.backgroundColor = bgColor;
				dom.byId("front6").style.backgroundColor = bgColor;
				
				// Set property values to pageTurningUtils object
				utils.init(320, 400);
				
				// Initialize catalog node
				utils.initCatalog(dom.byId("catalog"));
			});
			
			prev = function(){
				utils.turnToPrev();
			};
			
			next = function(){
				utils.turnToNext();
			};
		});
	</script>
	
	<style type="text/css">
		.myPane {
			background-image: -webkit-gradient(linear, left top, left bottom, from(#dcdcdc), to(#FFFFFF));
			font-family: Times New Roman, Helvetica;
			color: black;
		}
	</style>
</head>
<body style="visibility:hidden;">
	<div id="view1" data-dojo-type="dojox.mobile.View">
		<h1 data-dojo-type="dojox.mobile.Heading">Page Turning (Various page types)</h1>
		<div style="margin:5px;">
			<button onclick="prev()" style="width:50px">Prev</button>
			<button onclick="next()" style="width:50px">Next</button>
		</div>
		<div id="catalog" style="margin:10px;">
			<div id="page0"> <!-- image element -->
				<img alt="" id="front0" src="images/pic1.jpg"/>
				<div id="back0"></div>
			</div>
			<div id="page1"> <!-- image element under div element -->
				<div>
					<img alt="" id="front1" src="images/pic2.jpg" style="width:100%;height:100%"/>
				</div>
				<div id="back1"></div>
			</div>
			<div id="page2"> <!-- iframe -->
				<div id="front2" class="myPane">
					<iframe src="data/fragment1.html" style="width:99%;height:99%"></iframe>
				</div>
				<div id="back2"></div>
			</div>
			<div id="page3"> <!-- div contents -->
				<div id="front3" class="myPane">
					<div style="padding:10px;">
						<div style="font-size: 24px">Unbeatable JavaScript Tools</div>
						<div style="border-top: 1px dashed gray;margin: 20px"></div>
						<img alt="" src="images/dojo-logo1.png" style="float:left;margin-right:5px">
						<p>Dojo saves you time, delivers powerful performance, and scales with your development process. It's the toolkit experienced developers turn to for building superior desktop and mobile web experiences.</p>
					</div>
				</div>
				<div id="back3"></div>
			</div>
			<div id="page4"> <!-- dojox.mobile.View widget -->
				<div id="front4" data-dojo-type="dojox.mobile.View" style="height:100%;">
					<h1 data-dojo-type="dojox.mobile.Heading">View</h1>
					<div data-dojo-type="dojox.mobile.RoundRect" data-dojo-props='shadow:true'>
						<p><img alt="" src="images/dojo-logo1.png" width="60" height="60" style="text-align:left">
						Dojo saves you time and scales with your development process, using web standards as its platform. It's the toolkit experienced developers turn to for building high quality desktop and mobile web applications.</p>
					</div>
				</div>
				<div id="back4"></div>
			</div>
			<div id="page5"> <!-- dojox.mobile.ScrollableView widget -->
				<div id="front5" data-dojo-type="dojox.mobile.ScrollableView" style="height:100%;">
					<h1 data-dojo-type="dojox.mobile.Heading">ScrollableView</h1>
					<ul data-dojo-type="dojox.mobile.EdgeToEdgeList">
						<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-1.png"'>
							Item 1
						</li>
						<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-2.png"'>
							Item 2
						</li>
						<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-3.png"'>
							Item 3
						</li>
						<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-4.png"'>
							Item 4
						</li>
						<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-5.png"'>
							Item 5
						</li>
						<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-6.png"'>
							Item 6
						</li>
						<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-7.png"'>
							Item 7
						</li>
						<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-8.png"'>
							Item 8
						</li>
						<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-9.png"'>
							Item 9
						</li>
						<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-10.png"'>
							Item 10
						</li>
					</ul>
				</div>
				<div id="back5"></div>
			</div>
			<div id="page6"> <!-- dojox.mobile.ContentPane widget -->
				<div id="front6" data-dojo-type="dojox.mobile.ContentPane" data-dojo-props='href:"data/view5.html"'></div>
				<div id="back6"></div>
			</div>
		</div>
	</div>
</body>
</html>
